import { useRef, useEffect } from 'react';
import * as echarts from 'echarts';
import chartTheme from '@/data/chart.theme.json';
import { getRankingIcon, getScoreWithLine, getStarLevelIcon } from '@/utils/home.utils'

import styles from './index.module.css'

const failureTypeData = [
    { number:'01', label: '困人', count: 90 },
    { number:'02',label: '一般故障', count: 70 },
    { number:'03',label: '部件', count: 70 },
    { number:'04',label: '用户操作不当', count: 90 },
    { number:'05',label: '调整不到位', count: 90 },
    { number:'06',label: '其它', count: 80 },
]

const creditScoreInfo = [
    { name: '华阳街道办事处', score: 99, starLevel: 4 },
    { name: '成安路街道办事处', score: 92, starLevel: 3 },
    { name: '花成街道办事处', score: 84, starLevel: 3 },
    { name: '玉山镇街道办事处', score: 91, starLevel: 2 },
    { name: '东山镇街道办事处', score: 99, starLevel: 4 },
]

const elevatorStatus = () => {
    const maintenanceStatisticsRef = useRef(null);
    const elevatorHealthAnalysisRef = useRef(null);

    useEffect(() => {
        if (maintenanceStatisticsRef.current) {
            const myChart = echarts.init(maintenanceStatisticsRef.current, chartTheme, { renderer: 'svg' });
            const linearGradients = [
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#018a8c"
                }, {
                    offset: 1,
                    color: "#000"
                }], false),
                new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                    offset: 0,
                    color: "#00cefa"
                }, {
                    offset: 1,
                    color: "#000"
                }], false),
            ]

            const option = {
                xAxis: {
                    type: 'category',
                    data: ['1月', '3月', '5月', '7月', '9月', '11月']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                        barWidth: '15rem',
                        data: [
                            {
                                value: 263,
                                itemStyle: {
                                    normal: {
                                        color: linearGradients[0]
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '263'
                                    }
                                },
                            },
                            {
                                value: 283,
                                itemStyle: {
                                    normal: {
                                        color: linearGradients[1]
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '283'
                                    }
                                },
                            },
                            {
                                value: 652,
                                itemStyle: {
                                    normal: {
                                        color: linearGradients[0]
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '652'
                                    }
                                },
                            },
                            {
                                value: 270,
                                itemStyle: {
                                    normal: {
                                        color: linearGradients[0]
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '270'
                                    }
                                },
                            },
                            {
                                value: 203,
                                itemStyle: {
                                    normal: {
                                        color: linearGradients[1]
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '203'
                                    }
                                },
                            },
                            {
                                value: 278,
                                itemStyle: {
                                    normal: {
                                        color: linearGradients[0]
                                    }
                                },
                                label: {
                                    normal: {
                                        show: true,
                                        position: 'top',
                                        formatter: '278',
                                        fontSize: '2.6rem',
                                        color: '#0185a0'
                                    }
                                },
                            },
                        ],
                        type: 'bar'
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    }, [])

    useEffect(() => {
        if (elevatorHealthAnalysisRef.current) {
            const myChart = echarts.init(elevatorHealthAnalysisRef.current, chartTheme, { renderer: 'svg' });

            const option = {
                tooltip: {
                    trigger: 'item'
                },
                legend: {
                    itemHeight: 8,
                    itemWidth: 8,
                    icon: "rect",
                    bottom: '5%',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                graphic: [
                    {
                        type: 'text',
                        left: 'center',
                        top: '37%',
                        style: {
                            text: '健康度',
                            fill: '#fff',
                            fontSize: '14',
                            width: 30,
                            height: 30,
                            fontWeight: '700'
                        }
                    }
                ],
                series: [
                    {
                        name: '电梯健康状况',
                        type: 'pie',
                        radius: ['40%', '45%'],
                        center: ['50%', '40%'],
                        avoidLabelOverlap: true,
                        label: {
                            show: true,
                            padding: [-15, -15 - 15, -15],
                            formatter(param: Record<string, string>) {
                                return param.percent + '%';
                            },
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                            {
                                value: 41,
                                name: '非常健康',
                                itemStyle: {
                                    normal: {
                                        color: '#09e1e6'
                                    }
                                },
                            },
                            {
                                value: 33,
                                name: '一般健康',
                                itemStyle: {
                                    normal: {
                                        color: '#15b5ff'
                                    }
                                },
                            },
                            {
                                value: 26,
                                name: '不健康',
                                itemStyle: {
                                    normal: {
                                        color: '#767122'
                                    }
                                },
                            },
                        ]
                    }
                ]
            };

            option && myChart.setOption(option);
        }
    }, [])

    return (
        <div className={styles.elevatorStatus}>
            <div className={styles.maintenanceStatistics}>
                <div className={styles.maintenanceStatisticsHeader}>
                    <div className={styles.maintenanceStatisticsHeaderLabel}>保养台量</div>
                    <div className={styles.maintenanceStatisticsHeaderCount}>35621台</div>
                </div>
                <div ref={maintenanceStatisticsRef} className={styles.maintenanceStatisticsChart}></div>
            </div>
            <div className={styles.elevatorHealthAnalysis}>
                <div ref={elevatorHealthAnalysisRef} className={styles.elevatorHealthAnalysisChart}></div>
            </div>
            <div className={styles.failureType}>
                <ul className={styles.failureTypeContent}>
                    {
                        failureTypeData.map(({label, count, number}) => (
                            <li className={styles.failureTypeContentItem} key={label}>
                                <div className={styles.failureTypeContentItemNum}>{number}</div>
                                <div
                                    className={styles.failureTypeContentItemLength}
                                    style={{ width: `${count / 100 * 50}rem` }}
                                ></div>
                                <div className={styles.failureTypeContentItemTypeLabel}>{label}</div>
                            </li>
                        ))
                    }
                </ul>
            </div>
            <div className={styles.creditScore}>
                <div className={styles.creditScoreStarTable}>
                    <ul className={styles.creditScoreStarTableheader}>
                        <li>排名</li><li>名称</li><li>信用评分</li><li>星级评定</li>
                    </ul>
                    <div className={styles.creditScoreStarTableBody}>
                        {
                            creditScoreInfo.map(({name, score, starLevel}, number) => {
                                return (
                                    <ul key={name} className={styles.creditScoreStarTableItem}>
                                        <li>{getRankingIcon(number)}</li>
                                        <li>{name}</li>
                                        <li>{getScoreWithLine(score)}</li>
                                        <li>{getStarLevelIcon(starLevel)}</li>
                                    </ul>
                                )
                            })
                        }
                    </div>
                </div>
            </div>
        </div>
    )
}

export default elevatorStatus;